<template>

  <div class="app-container">

    <el-row>


      <el-card class="qu-content content-h">
        <el-row style="display: flex; justify-content: end">

          <el-button type="danger" @click="exitExam" icon="el-icon-close" size="small">
            退出练习
          </el-button>

        </el-row>
        <p v-if="quData.content">【{{ quTypeFilter(quData.quType) }}】 {{ quData.content }}</p>
        <p v-if="quData.image!=null && quData.image!=''">
          <el-image :src="quData.image" style="max-width:100%;"/>
        </p>
        <div v-if="quData.quType === 1 || quData.quType===3">
          <el-radio-group v-model="radioValue" :disabled="analysisShow">
            <el-radio v-for="item in quData.answerList" :label="item.id" :key="item.id"
                      :class="renderOptionClass(item)">
              {{ item.abc }}.{{ item.content }}
              <div v-if="item.image!=null && item.image!=''" style="clear: both">
                <el-image :src="item.image" style="max-width:100%;"/>
              </div>
            </el-radio>
          </el-radio-group>
        </div>

        <div v-if="quData.quType === 2">

          <el-checkbox-group v-model="multiValue" :disabled="analysisShow">
            <el-checkbox v-for="item in quData.answerList" :key="item.id" :label="item.id"
                         :class="renderOptionClass(item)">
              {{ item.abc }}.{{ item.content }}
              <div v-if="item.image!=null && item.image!=''" style="clear: both">
                <el-image :src="item.image" style="max-width:100%;"/>
              </div>
            </el-checkbox>
          </el-checkbox-group>

        </div>

        <div v-if="analysisShow" style="margin-top: 20px; color: #1890ff; font-weight: bold">
          正确答案：{{ quData.rightTags.join(' ') }}
        </div>

        <div style="margin-top: 20px; display: flex; justify-content: space-between;">
          <el-button :disabled="currentIndex === 0" type="warning" icon="el-icon-back" @click="handlePrev">
            上一题
          </el-button>

          <el-button type="primary" @click="handleConfirm" :disabled="analysisShow" :loading="loading">
            确定
          </el-button>

          <el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handleNext" :disabled="!analysisShow">
            下一题
          </el-button>

        </div>

      </el-card>

      <el-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px">
        整题解析：
        <p>{{ quData.analysis }}</p>
        <p v-if="!quData.analysis">暂无解析内容！</p>
      </el-card>

      <el-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px;">
        选项解析：
        <div v-for="an in quData.answerList" v-if="an.analysis" class="qu-analysis-line">
          <p style="color: #555;">{{ an.content }}：</p>
          <p style="color: #1890ff;">{{ an.analysis }}</p>
        </div>
        <p v-if="analysisCount === 0">暂无选项解析</p>

      </el-card>


    </el-row>
  </div>

</template>

<script>
import {getRandomQuestion} from '@/api/paper/practice'
import {quTypeFilter} from '@/filters'

export default {
  name: 'ExamProcess',
  data() {
    return {
      // 全屏/不全屏
      isFullscreen: false,
      showPrevious: false,
      showNext: true,
      loading: false,
      pageLoading: false,
      // 试卷ID
      paperId: '',
      // 当前答题卡
      cardItem: {},
      allItem: [],
      radioValue: '',
      multiValue: [],
      // 当前题目内容
      quData: {
        answerList: []
      },
      quHistory: [],
      analysisShow: false,
      analysisCount: 0,
      currentIndex: 0,
    }
  },
  created() {
    const id = this.$route.params.examId
    if (typeof id !== 'undefined') {
      this.paperId = id
      this.queryQuestion(id)
    }
  },

  computed: {
    renderOptionClass(item) {
      // 返回一个函数，用于动态计算每个选项的样式
      const selectedAnswers = this.quData.quType === 2 ? this.multiValue : this.radioValue || this.quData.userAnswer;
      return (item) => {
        if (this.analysisShow) {
          if (this.quData.rightAnswers.includes(item.id)) {
            return 'is-right-answer'
          }
          if (selectedAnswers.includes(item.id)) {
            return 'is-error-answer'
          }
        }
        return ''
      }
    }
  },

  methods: {
    quTypeFilter,
    handlePrev() {
      if (this.currentIndex > 0) {
        this.currentIndex -= 1
        this.quData = this.quHistory[this.currentIndex]
        this.analysisShow = this.quData.userAnswer !== undefined
        this.radioValue = ''
        this.multiValue = []
      }
    },
    handleNext() {
      if (this.currentIndex < this.quHistory.length - 1) {
        this.currentIndex += 1
        this.quData = this.quHistory[this.currentIndex]
        this.analysisShow = this.quData.userAnswer !== undefined
        this.radioValue = ''
        this.multiValue = []
      } else {
        this.queryQuestion(this.paperId)
      }
    },
    queryQuestion(id) {
      this.loading = true

      getRandomQuestion(id).then(res => {
        this.analysisShow = false
        const {answers, qu} = res.data
        this.quData = qu
        this.quData.answerList = answers.map((item, index) => {
          item.abc = this.getOptionLabel(index)
          return item
        })

        this.quData.rightTags = this.quData.answerList.map(item => {
          if (item.isRight) {
            return item.abc
          }
          return ''
        })
        this.quData.rightAnswers = this.quData.answerList.filter(item => item.isRight).map(item => item.id)
        this.loading = false
        this.currentIndex = this.quHistory.push(qu) - 1
      }).catch(() => {
        this.loading = false
      })
    },
    getOptionLabel(index) {
      const options = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T']
      return options[index] || ''
    },
    handleConfirm() {
      this.analysisShow = true
      this.quHistory[this.currentIndex].userAnswer = this.quData.quType === 2 ? this.multiValue : this.radioValue;
    },
    exitExam() {
      this.$confirm('您确定要退出练习吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 获取当前router视图
        const view = this.$store.state.tagsView.visitedViews.find(v => v.name === 'StartPractice')
        this.$store.dispatch('tagsView/delView', view).then(({visitedViews}) => {
          this.$router.push({name: 'PracticeExam'})
        })
      }).catch(() => {
        // 取消操作
      })
    }
  }
}
</script>

<style scoped>

.qu-content div {
  line-height: 30px;
  width: 100%;
}

.el-checkbox-group label, .el-radio-group label {
  width: 100%;
}

.content-h {
  overflow-y: auto;
}

.qu-analysis p {
  color: #555;
  font-size: 14px
}

.qu-analysis-line {
  margin-top: 20px;
  border-bottom: #eee 1px solid
}

.el-checkbox-group label, .el-radio-group label {
  width: 100%;
}

.card-title {
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}

.card-line {
  padding-left: 10px
}

.card-line span {
  cursor: pointer;
  margin: 2px;
}

::v-deep
.el-radio, .el-checkbox {
  padding: 9px 20px 9px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
  width: 100%;
}

.is-checked {
  border: #409eff 1px solid;
}

.is-right-answer {
  border: #67c23a 1px solid;
}

.is-error-answer {
  border: #f56c6c 1px solid;
}

.el-radio img, .el-checkbox img {
  max-width: 200px;
  max-height: 200px;
  border: #dcdfe6 1px dotted;
}

::v-deep .el-checkbox__label {
  display: inline-block;
  white-space: normal;
}

::v-deep .el-radio__label {
  display: inline-block;
  white-space: normal;
}

::v-deep
.el-checkbox__inner {
  display: none;
}

::v-deep
.el-radio__inner {
  display: none;
}

::v-deep
.el-checkbox__label {
  line-height: 30px;
}

::v-deep
.el-radio__label {
  line-height: 30px;
}

</style>

